{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet"
          href="{% static 'AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/selectize.css' %}">

    <style>
        /* dataTables列内容居中 */
        #example1 > tbody > tr > td {
            text-align: center;
            word-wrap: break-word;
        }

        /* dataTables表头居中 */
        #example1 > thead:first-child > tr:first-child > th {
            text-align: center;
        }

        #searchBox .form-group > label {
            margin-top: 5px; text-align: right; padding-right: 0px; padding-left: 0px;
        }

        #searchBox .form-group > .input-group {
            position: relative;
            left: 15px;
        }

        #buttonBar button {
            margin-right: 2px;
            margin-bottom: 5px;
        }

        @media screen and (min-width:1200px) and (max-width:1800px){
            label[for='asset_nu']{
                font-size:2px;
                line-height: 12px;
            }
        }

        td span.badge{
            white-space: pre-wrap;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row" style="overflow-x: auto;">
        <div class="col-sm-7 pull-left" id="buttonBar" style="margin-bottom: 3px">
            <button class="btn btn-sm btn-info pull-left" id="advancedSearch">
                <i class="fa fa-search"></i>
                <span class="bigger-110">点击筛选</span>
            </button>
            <button class="btn btn-sm btn-info pull-left" id="refreshCondition">
                <i class="glyphicon glyphicon-trash"></i>
                <span class="bigger-110">清空筛选</span>
            </button>
        </div>
        <form id="searchForm">
            <div class="col-md-12 col-lg-12 col-xs-12 pull-left" style="margin: 3px 0;">
                <div id="searchBox" style="width: 99%;">
                    <div class="clearfix visible-xs"></div>
                    <div class="col-md-6 col-lg-4 col-xs-12" style="margin: 3px 0;">
                        <div class="form-group">
                            <label for="server_ip" class="col-lg-4 col-md-4 col-xs-3 control-label">管理IP</label>
                            <div class="col-lg-8 col-md-8 col-xs-9">
                              <input type="text" class="form-control" id="server_ip" name="server_ip">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xs-12" style="margin: 3px 0;">
                        <div class="form-group">
                            <label for="asset_nu" class="col-lg-3 col-md-4 col-xs-3 control-label">资产编号/资产名称</label>
                            <div class="col-lg-9 col-md-8 col-xs-9">
                              <input type="text" class="form-control" id="asset_nu" name="asset_nu">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xs-12" style="margin: 3px 0;">
                        <div class="form-group">
                            <label for="fort_username" class="col-lg-3 col-md-4 col-xs-3 control-label">账号</label>
                            <div class="col-lg-9 col-md-8 col-xs-9">
                              <input type="text" class="form-control" id="fort_username" name="fort_username">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xs-12" style="margin: 3px 0;">
                        <div class="form-group">
                            <label for="server_protocol" class="col-lg-4 col-md-4 col-xs-3 control-label">协议</label>
                            <div class="col-lg-8 col-md-8 col-xs-9">
                                <select class="form-control" id="server_protocol" style="width: 100%;" name="server_protocol">
                                        <option value=""></option>
                                    {% for protocol in server_protocols %}
                                        <option value="{{ protocol.0 }}">{{ protocol.1 }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xs-12" style="margin: 3px 0;">
                        <div class="form-group">
                            <label for="asset_product" class="col-lg-3 col-md-4 col-xs-3 control-label">产品名称</label>
                            <div class="col-lg-9 col-md-8 col-xs-9">
                                <select id="asset_product" style="display: none;" name="asset_product"></select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xs-12" style="margin: 3px 0;">
                        <div class="form-group">
                            <label for="asset_environment" class="col-lg-3 col-md-4 col-xs-3 control-label">设备环境</label>
                            <div class="col-lg-9 col-md-8 col-xs-9">
                              <select class="form-control" id="asset_environment" style="width: 100%;" name="asset_environment">
                                    <option value=""></option>
                                    {% for choice in asset_environment_ %}
                                        <option value="{{ choice.0 }}">{{ choice.1 }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix visible-xs"></div>
                </div>
            </div>
        </form>
        <!--dataTable-->
        <div class="col-xs-12">
            <!-- /.box -->
            <div class="box" style="min-width: 1100px;">
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped" style="width:100%; table-layout: fixed;">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>主机</th>
                            <th>资产编号/资产名称</th>
                            <th>连接协议</th>
                            <th>账号/VNC对象</th>
                            <th>账号说明</th>
                            <th>操作</th>
                        </tr>
                        </thead>

                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <!-- /.row -->
{% endblock %}


{% block js %}
    <!-- DataTables -->
    <script src="{% static 'AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
    <script src="{% static 'js/selectize.min.js' %}"></script>

    <script>
        $(function () {
            $('#asset_product').selectize({
                valueField: 'id',
                labelField: 'text',
                searchField: 'text',
                load: function(query, callback) {
                    $.ajax({
                        url: '/project/find_product_name/',
                        data: {
                            product_name: query
                        },
                        dataType: 'json',
                        type: 'GET',
                        error: function() {
                            callback();
                        },
                        success: function(res) {
                            callback(res.results);
                        }
                    });
                }
            });

            var fortserveruser = $('#example1').DataTable({
                language: {
                   "sProcessing": "处理中...",
                   "sLengthMenu": "显示 _MENU_ 项结果",
                   "sZeroRecords": "没有匹配结果",
                   "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                   "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                   "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                   "sInfoPostFix": "",
                   "sSearch": "快速搜索:",
                   "searchPlaceholder": "管理IP 资产编号/资产名称",
                   "sUrl": "",
                   "sEmptyTable": "表中数据为空",
                   "sLoadingRecords": "载入中...",
                   "sInfoThousands": ",",
                   "oPaginate": {
                       "sFirst": "首页",
                       "sPrevious": "上页",
                       "sNext": "下页",
                       "sLast": "末页"
                   },
                   "oAria": {
                       "sSortAscending": ": 以升序排列此列",
                       "sSortDescending": ": 以降序排列此列"
                   }
               },
                columnDefs: [
                    {
                        'targets': 0,
                        'render': function (data, type, row, meta) {
                            data = row.id;
                            return data;
                        },

                    },
                    {
                        'targets': 1,
                        'render': function (data, type, row, meta) {
                            data = row.fort_server.server.IP;
                            return data;
                        },

                    },
                    {
                        'targets': 2,
                        'render': function (d, type, row, meta) {
                            var data = ''
                            for(asset of row.fort_server.asset){
                                data += '<span class="badge bg-aqua">'+asset.asset_nu+'</span>&nbsp;\n'
                            }
                            return data;
                        },
                        'orderable': false
                    },
                    {
                        'targets': 3,
                        'render': function (data, type, row, meta) {
                            var protocol = row.fort_server.server_protocol
                            switch (protocol[0]){
                                case 'ssh':
                                    data = '<div class="badge bg-blue">'+protocol[1]+'</div>\n'
                                    break;
                                case 'telnet':
                                    data = '<div class="badge bg-teal">'+protocol[1]+'</div>\n'
                                    break;
                                case 'vnc':
                                    data = '<div class="badge bg-green">'+protocol[1]+'</div>\n'
                                    break;
                                case 'rdp':
                                    data = '<div class="badge bg-purple">'+protocol[1]+'</div>\n'
                                    break;
                            }
                            return data;
                        },
                    },
                    {
                        'targets': 4,
                        'render': function (data, type, row, meta) {
                            data = row.fort_server.server_protocol[0] == 'vnc'?(row.fort_username?'端口：'+row.fort_vnc_port+' - 对象：'+row.fort_username:'端口：'+row.fort_vnc_port):row.fort_username;
                            return data;
                        },
                    },
                    {
                        'targets': 5,
                        'render': function (data, type, row, meta) {
                            data = row.fort_user_memo
                            return data;
                        },
                        'orderable': false,
                    },
                    {
                        'targets': 6,
                        'render': function (d, type, row, meta) {
                            return '<a href="/fort/terminal/'+row.id+'/" class="btn btn-primary btn-xs" target="_blank">连接<i class="fa fa-fw fa-terminal"></i></a>'
                        },
                        'orderable': false,
                    }
                ],
                "infoCallback": function(settings,start,end,max,total,pre) {
                    var api = this.api();
                    var pageInfo = api.page.info();
                    return "共"+pageInfo.pages +"页,当前显示"+ start + "到" + end + "条记录" + ",共有"+ total + "条记录";
                },
                "order": [[0, "desc"]],
                "processing": true,
                "serverSide": true,
                "ajax": function (data, callback, settings) {
                    //console.log(data)
                    //封装请求参数
                    var param = {};
                    param.page_size = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.page = (data.start / data.length)+1;//当前页码
                    param.search = data.search.value;
                    var order = data.order[0]
                    var order_key = data.columns[order.column].data
                    $("#searchForm").serializeArray().forEach(function(el){
                        param[el['name']]= el['value']
                    })
                    if(order.dir=="asc"){
                        param.ordering = order_key
                    } else {
                        param.ordering = '-'+order_key
                    }
                    //ajax请求数据
                    $.ajax({
                        type: "GET",
                        url: "/api/fortuserlist/",
                        cache: false,  //禁用缓存
                        data: param,  //传入组装的参数
                        dataType: "json",
                        success: function (result) {
                            //console.log(result);
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.count;//返回数据全部记录
                            returnData.recordsFiltered = result.count;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.results;//返回的数据列表
                            //console.log(returnData);
                            callback(returnData);
                        }
                    });
                },
                columns: [
                    { "data": "id", "width": "80px" },
                    { "data": "IP", },
                    { "data": "asset_nu", "width": "350px" },
                    { "data": "server_protocol", "width": "100px" },
                    { "data": "fort_username","width": "200px" },
                    {  },
                    { "width": "100px" },
                ],
            });

            $("#refreshCondition").click(function () {
                $("#searchBox input,#searchBox select").val("")
                $('#asset_product').selectize()[0].selectize.clear()
            })

            $("#advancedSearch").click(function () {
                fortserveruser.draw(true);
            });

            $(document).keypress(function (e) {
                if(e.shiftKey&&e.keyCode==13){
                    fort_server_table.draw(true);
                }
            })
        });
    </script>

{% endblock %}

